$(function() {
	//tab 切换 颜色
	$('.tab span').click(function() {
		// 
		$(this).css('color', 'red')
		$(this).siblings().css('color', 'black')
		console.log($(this).index())


		//切换网页

		if ($(this).index() == 0) {
			$('.render').siblings().css('display', 'none')
			$('.render').css('display', 'block')
		}
		if ($(this).index() == 2) {
			$('.renderr').siblings().css('display', 'none')
			$('.renderr').css('display', 'block')
		}
		if ($(this).index() == 4) {
			$('.renderr2').siblings().css('display', 'none')
			$('.renderr2').css('display', 'block')
		}
		if ($(this).index() == 6) {
			$('.renderr3').siblings().css('display', 'none')
			$('.renderr3').css('display', 'block')
		}
		if ($(this).index() == 8) {
			$('.renderr4').siblings().css('display', 'none')
			$('.renderr4').css('display', 'block')
		}
		if ($(this).index() == 10) {
			$('.renderr5').siblings().css('display', 'none')
			$('.renderr5').css('display', 'block')
		}
		if ($(this).index() == 12) {
			$('.renderr6').siblings().css('display', 'none')
			$('.renderr6').css('display', 'block')
		}
		if ($(this).index() == 14) {
			$('.renderr7').siblings().css('display', 'none')
			$('.renderr7').css('display', 'block')
		}
		if ($(this).index() == 16) {
			$('.renderr8').siblings().css('display', 'none')
			$('.renderr8').css('display', 'block')
		}
	})


	//li列表 排他  改变 样式
	$('.ull li').mouseover(function() {

		$(this).children().last().prev().prev().children().last().children().css('opacity', 0)
		$(this).children().last().prev().prev().children().first().css('opacity', 1)
		$(this).css('border', '6px solid #bcb9b9')
	}).mouseout(function() {
		$('.mengban').stop().animate({
			easing: 'linear',
			height: 0,
		}, 300)
		$(this).children().last().prev().prev().children().last().children().css('opacity', 1)
		$('.ull li').css('border', '6px solid #E4E4E4')
		$(this).children().last().prev().prev().children().first().css('opacity', 0)
	})

//返回顶部
  var doc = $('html,body');
	   var ele = this;
 $('.rTop').click(function(){
	            doc.animate({scrollTop : '0'})
	        });
	// 到页面底部追加一个ul
	$(window).scroll(function() {
	 var scrollTop = $(this).scrollTop();
	
	// console.log($(this).scrollTop())
	 var scrollHeight = $(document).height();
	 // console.log(scrollTop)
	 var windowHeight = $(this).height();
	 // console.log(scrollTop+windowHeight)
	 // console.log(scrollTop + windowHeight ,scrollHeight)
	 if (scrollTop <= 4000) {
	  if (parseInt(scrollTop) + parseInt(windowHeight)  == scrollHeight) {
		  
	var jia = gitdata1();
	var jia2= gitdata2();
	var jia3=gitdata3();
	var jia4=gitdata4();
	var jia5=gitdata5();
	var jia6=gitdata6();
	var jia7=gitdata7();
	var jia8=gitdata8();
	var jia8=gitdata9();
	    $('.render').insertAfter(jia)
	   $('.renderr').insertAfter(jia2)
	    $('.renderr2').insertAfter(jia3)
		$('.renderr3').insertAfter(jia3)
		$('.renderr4').insertAfter(jia4)
		$('.renderr5').insertAfter(jia5)
		$('.renderr6').insertAfter(jia6)
		$('.renderr7').insertAfter(jia7)
		$('.renderr8').insertAfter(jia8)
	   console.log("到底了,发起请求")

	  }
	 }
	 if (scrollTop>300) {
	 	$('.rTop').css('display','block')
	 }
	 if (scrollTop<300) {
	 	$('.rTop').css('display','none')
	 }
	 setInterval(function(){
		 $('.rTop').on('click',function(){
			 $(this).scrollTop()-100
		 })
	 },200)
	});
	
	
	



// setInterval(function () {
// 	var dibu = document.querySelector("footer");
// 	var toPP = dibu.scrollTop;
// 	console.log(toPP);
// },1000)




//渲染网页
//首页
function gitdata1() {
	var time = ""
	data1.forEach(function(i, m) {
		console.log(i);
		
		time += $(".render").append(`
			<ul class="ull">
				<li data-id="${i.id}">
					<div class="mengban"></div>
					<img src="${i.url}" alt="" class="img" >
					
					<div class="b-log">
						<a href="" class="follow">
							<span class="follow_span">♡关注</span>
						</a>
						<a href="" class="logo">
							<img src=${i.log} alt="">
						</a>
					</div>
					<div class="wz">${i.title}</div>
					<div class="animation">
						<div class="text">品牌描述</div>
						<div class="null">暂无描述</div>
					</div>
					
				</li>
			</ul>
			`)
	})

}

gitdata1(1);

//家用电器
function gitdata2() {
	var time = ""
	data2.forEach(function(i, m) {
		time += $(".renderr").append(`
			<ul class="ull">
				<li>
					<div class="mengban"></div>
					<img src="${i.url}" alt="" class="img" >
					
					<div class="b-log">
						<a href="" class="follow">
							<span class="follow_span">♡关注</span>
						</a>
						<a href="" class="logo">
							<img src=${i.log} alt="">
						</a>
					</div>
					<div class="wz">${i.title}</div>
					<div class="animation">
						<div class="text">品牌描述</div>
						<div class="null">暂无描述</div>
					</div>
					
				</li>
			</ul>
			`)
	})

}
gitdata2(1);
//服装
function gitdata3() {
	var time = ""
	data3.forEach(function(i, m) {
		time += $(".renderr2").append(`
			<ul class="ull">
				<li>
					<div class="mengban"></div>
					<img src="${i.url}" alt="" class="img" >
					
					<div class="b-log">
						<a href="" class="follow">
							<span class="follow_span">♡关注</span>
						</a>
						<a href="" class="logo">
							<img src=${i.log} alt="">
						</a>
					</div>
					<div class="wz">${i.title}</div>
					<div class="animation">
						<div class="text">品牌描述</div>
						<div class="null">暂无描述</div>
					</div>
					
				</li>
			</ul>
			`)
	})

}
gitdata3(1);
//鞋靴
function gitdata4() {
	var time = ""
	data4.forEach(function(i, m) {
		time += $(".renderr3").append(`
			<ul class="ull">
				<li>
					<div class="mengban"></div>
					<img src="${i.url}" alt="" class="img" >
					
					<div class="b-log">
						<a href="" class="follow">
							<span class="follow_span">♡关注</span>
						</a>
						<a href="" class="logo">
							<img src=${i.log} alt="">
						</a>
					</div>
					<div class="wz">${i.title}</div>
					<div class="animation">
						<div class="text">品牌描述</div>
						<div class="null">暂无描述</div>
					</div>
					
				</li>
			</ul>
			`)
	})

}
gitdata4(1);
//手机
function gitdata5() {
	var time = ""
	data5.forEach(function(i, m) {
		time += $(".renderr4").append(`
			<ul class="ull">
				<li>
					<div class="mengban"></div>
					<img src="${i.url}" alt="" class="img" >
					
					<div class="b-log">
						<a href="" class="follow">
							<span class="follow_span">♡关注</span>
						</a>
						<a href="" class="logo">
							<img src=${i.log} alt="">
						</a>
					</div>
					<div class="wz">${i.title}</div>
					<div class="animation">
						<div class="text">品牌描述</div>
						<div class="null">暂无描述</div>
					</div>
					
				</li>
			</ul>
			`)
	})

}
gitdata5(1);
//电脑
function gitdata6() {
	var time = ""
	data6.forEach(function(i, m) {
		time += $(".renderr5").append(`
			<ul class="ull">
				<li>
					<div class="mengban"></div>
					<img src="${i.url}" alt="" class="img" >
					
					<div class="b-log">
						<a href="" class="follow">
							<span class="follow_span">♡关注</span>
						</a>
						<a href="" class="logo">
							<img src=${i.log} alt="">
						</a>
					</div>
					<div class="wz">${i.title}</div>
					<div class="animation">
						<div class="text">品牌描述</div>
						<div class="null">暂无描述</div>
					</div>
					
				</li>
			</ul>
			`)
	})

}
gitdata6(1);
//家具
function gitdata7() {
	var time = ""
	data7.forEach(function(i, m) {
		time += $(".renderr6").append(`
			<ul class="ull">
				<li>
					<div class="mengban"></div>
					<img src="${i.url}" alt="" class="img" >
					
					<div class="b-log">
						<a href="" class="follow">
							<span class="follow_span">♡关注</span>
						</a>
						<a href="" class="logo">
							<img src=${i.log} alt="">
						</a>
					</div>
					<div class="wz">${i.title}</div>
					<div class="animation">
						<div class="text">品牌描述</div>
						<div class="null">暂无描述</div>
					</div>
					
				</li>
			</ul>
			`)
	})

}
gitdata7(1);
//个护
function gitdata8() {
	var time = ""
	data8.forEach(function(i, m) {
		time += $(".renderr7").append(`
			<ul class="ull">
				<li>
					<div class="mengban"></div>
					<img src="${i.url}" alt="" class="img" >
					
					<div class="b-log">
						<a href="" class="follow">
							<span class="follow_span">♡关注</span>
						</a>
						<a href="" class="logo">
							<img src=${i.log} alt="">
						</a>
					</div>
					<div class="wz">${i.title}</div>
					<div class="animation">
						<div class="text">品牌描述</div>
						<div class="null">暂无描述</div>
					</div>
					
				</li>
			</ul>
			`)
	})

}
gitdata8(1);
//运动
function gitdata9() {
	var time = ""
	data9.forEach(function(i, m) {
		time += $(".renderr8").append(`
			<ul class="ull">
				<li>
					<div class="mengban"></div>
					<a href="particulars.html"></a>
					<div class="b-log">
						<a href="" class="follow">
							<span class="follow_span">♡关注</span>
						</a>
						<a href="" class="logo">
							<img src=${i.log} alt="">
						</a>
					</div>
					<div class="wz">${i.title}</div>
					<div class="animation">
						<div class="text">品牌描述</div>
						<div class="null">暂无描述</div>
					</div>
					
				</li>
			</ul>
			`)
	})

}
gitdata9(1);



let allli =  $('.ull li');
allli.click(function(){
	var id = $(this).attr('data-id');
	var stoage = window.localStorage;
	stoage.setItem('id',id);
	stoage.setItem('index',1);
	window.location.href = 'particulars.html';
})

// 购物车系列
var xiaoyuand = document.querySelector(".cxdsp"); //小圆点(数量)
var gouwuc = document.querySelector(".cxdli3");   //购物车 (单独的点击块)

gouwuc.onmouseover=function(){  //悬浮的时候购物车样式
    xiaoyuand.style.backgroundColor = "#fff";
    xiaoyuand.style.color = "#f42424";
}
gouwuc.onmouseout=function(){  //离开的时候购物车样式
    xiaoyuand.style.backgroundColor = "#f42424";
    xiaoyuand.style.color = "#fff";
}

// 购物车展开问题
var gouwuczhans = document.querySelector(".gouwu_zhans");  //获取购物车展示区域(展示)
var cebiangouwc = document.querySelector(".publicAich");  //侧边购物车栏
var gouwucjiesu = document.querySelector(".gouwu_jiesuan"); //购物车展示区域的结算区
var gouwugouwuw = document.querySelector(".gouw"); //购物车(全部)

var idd = 0;  //点击次数
gouwuc.onclick=function(){
    idd++;
    if (idd%2==0) {
        cebiangouwc.style.right="0px";
        gouwugouwuw.style.right="-280px";
        gouwucjiesu.style.right="-280px";
    }else{
        cebiangouwc.style.right="280px";
        gouwugouwuw.style.right="0px";
        gouwucjiesu.style.right="0px";
    }
}

// 点击关闭购物车 - 关闭按钮
var guanbianniu = document.querySelector(".bi-x-circle"); //获取关闭购物车的按钮

guanbianniu.onclick=function(){
    cebiangouwc.style.right="0px";
    gouwugouwuw.style.right="-280px";
    gouwucjiesu.style.right="-280px";
}
 
 
 
 
 
 
 })